<template lang="pug">
    .write
        .content
            h1 表单填写
            ul
                li(v-for="(item,index) in menu" :key="index")
                    transition(name="fade")
                        label.label(v-show="item.isLabel") {{item.name}}
                    input(v-model="item.val" @click="item.isLabel = true" :placeholder="item.name" :class="{'write-input':item.isLabel}")
            div.button-line
                .button.button2(@click="rewrite") 重填
                .button 提交
</template>

<script>
export default {
  name: "write",
  data() {
    return {
      menu: [
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        },
        {
          name: "name",
          isLabel: false,
          val: ""
        }
      ]
    };
  },
  methods: {
    rewrite() {
      this.menu.forEach(item => {
        item.val = "";
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
    .fade-enter-active, .fade-leave-active
        transition: 1s;

    .fade-enter, .fade-leave-to
        transform: translateY(20px);
        color black

    .write
        background-color white
        box-shadow 1px 1px 5px gray
        ul
            list-style-type none
            li
                height 80px
                width 500px
                margin 20px
                text-align left
                display inline-block
                vertical-align top
                .label
                    display block
                    color orangered
                    font-size 18px
                    padding-left 10px
                input
                    display block
                    outline none
                    border none
                    border-bottom 1px gray solid
                    font-size 20px
                    height 50px
                    width 490px
                    padding-left 10px
                .write-input
                    border-bottom 1px solid orangered
        .button-line
            display: flex
            justify-content flex-end
            padding-bottom 10px
            .button
                cursor pointer
                width 50px
                height 50px
                line-height 50px
                border-radius 50%
                outline none
                border none
                box-shadow 3px 3px 6px grey
                color white
                font-weight bold
                background-color orange
                margin-right 20px
                &:active
                    box-shadow none
            .button2
                background-color rebeccapurple
</style>
